<template id="searchFruits">
    <div>
        <div class="searchFruits_top">
            <img src="../image/dayu.jpg" alt="" @click="getSearchFruits()">
            <input type="text" id="search_keyword" v-model="keyword" placeholder="新鲜水果、生鲜" autofocus="autofocus">
            <span @click="search(keyword)">搜索</span>
            <img src="../image/wang.jpg" alt="">
        </div>
        <div class="searchFruits_search">
            <h4>历史搜索</h4>
            <ul>
                <li v-for="v in data.my_keyword" @click="search(v)">{{v}}</li>
            </ul>
            <h5>热门搜索</h5>
            <ul>
                <li v-for="v in data.keyword" @click="search(v)">{{v}}</li>
            </ul>
        </div>
        <h6 class="searchFruits_h6">热门推荐</h6>
        <div class="searchFruits_table">
            <div class="searchFruits_t">
                <dl v-for="v in data.hot_goods">
                    <dt><img @click="goods_info(v.goods_id)" :src="v.goods_thumb" alt="" class="img_12" v-bind:id="'img'+v.goods_id"></dt>
                    <dd>
                        <p>{{v.goods_name}}</p>
                        <p>¥{{v.shop_price}}<time>/{{v.goods_share}}</time></p>
                        <img src="../image/add_q.png" alt=""  @click="addCart(v.goods_id)">
                    </dd>
                </dl>

            </div>
        </div>
        <v-shopCar></v-shopCar>
    </div>
</template>
<script>
    import shopCar from './shopCar.vue';
    export default{
        name:'searchFruits',
        components:{
           'v-shopCar':shopCar,
        },
        data(){
            return{
                keyword:'',
                data:[],
            }
        },
        mounted:function(){
            this.$http.jsonp(
                this.GLOBAL.BaseUrl+'/mobile/api/v1/Goods.php?mode=search',
                {jsonp:'callback'}
            ).then(function(res){
                if (res.body.code != 200) {
                    alert(res.body.code);
                    return false;
                }

                this.data=res.body.data;
            })
        },
        methods:{
            // 搜索跳转
            search:function(str){
                str = str.replace(/(^\s*)|(\s*$)/g, "");
                if (! str) {
                    alert('请输入关键字！');
                    return false;
                }

                this.$router.push('/listDetail?keyword=' + str);
            },

            getSearchFruits:function(){
                window.history.go(-1)
            },

            // 商品页跳转
            goods_info:function (id) {
                this.$router.push('/shopDetails?goods_id=' + id);
            },
            addCart:function (gid, number = 1) {
                this.GLOBAL.addCart(this,gid,number,this.GLOBAL.goods_num);
                this.GLOBAL.get_te1(gid);

            }
        }
    }

</script>
<style>
    .flyer-img{
        height:0.5rem;
        width:0.5rem;
        border-radius: 50%;
    }
    .searchFruits_t dl{
        width:2.94rem;
        height:4.28rem;
        border-top:1px solid #ededed;
        flex:1;
    }
    .searchFruits_t dl:nth-of-type(even) dd{
        width:2.94rem;
        height:1.46rem;
        position:relative;
    }
    .searchFruits_t dl:nth-of-type(even) dd p:nth-of-type(1){
        color:#0a0a0a;
        font-size:0.26rem;
        line-height:0.54rem;
        height:0.54rem;
        width:2.94rem;
        text-indent: 0.28rem;
    }
    .searchFruits_t dl:nth-of-type(even) dd p:nth-of-type(2){
        color:#ff4800;
        font-size:0.2rem;
        height:0.51rem;
        line-height:0.51rem;
        width:2.94rem;
        text-indent: 0.28rem;
    }
    .searchFruits_t dl:nth-of-type(even) dt{
        width:2.94rem;
        height:2.72rem;
        position:relative;
    }
    .searchFruits_t dl:nth-of-type(even) dt img{
        display:block;
        position:absolute;
        left:0.64rem;
        top:0.5rem;
        width:1.54rem;
        height:1.54rem;
    }
    .searchFruits_t dl:nth-of-type(even) dd p:nth-of-type(2) time{
        font-size:0.18rem;
    }
    .searchFruits_t dl:nth-of-type(odd) dt img{
        display:block;
        width:1.54rem;
        height:1.54rem;
        position:absolute;
        left:0.37rem;
        top:0.5rem;
    }
    .searchFruits_t dl:nth-of-type(odd) dd{
        width:2.94rem;
        height:1.46rem;
        position:relative;
    }
    .searchFruits_t dl:nth-of-type(even) dd img{
        display:block;
        position:absolute;
        left:2.49rem;
        top:0.6rem;
        width:0.35rem;
        height:0.35rem;
    }
    .searchFruits_t dl:nth-of-type(odd) dd img{
        display:block;
        position:absolute;
        left:2.24rem;
        top:0.6rem;
        width:0.35rem;
        height:0.35rem;
    }
    .searchFruits_t dl:nth-of-type(odd) dd p:nth-of-type(1){
        color:#0a0a0a;
        font-size:0.26rem;
        line-height:0.54rem;
        height:0.54rem;
        width:2.94rem;
    }
    .searchFruits_t dl:nth-of-type(odd) dd p:nth-of-type(2){
        color:#ff4800;
        font-size:0.2rem;
        height:0.51rem;
        line-height:0.51rem;
        width:2.94rem;
    }
    .searchFruits_t dl:nth-of-type(odd) dd p:nth-of-type(2) time{
        font-size:0.18rem;
    }
    .searchFruits_t dl:nth-of-type(odd) dt{
        width:2.94rem;
        height:2.72rem;
        position:relative;
    }
    .searchFruits_t dl:nth-of-type(odd){
        border-right:1px solid #ededed;
    }
    .searchFruits_t{
        width:5.93rem;
        min-height:8.4rem;
        margin:auto;
        display:flex;
        flex-wrap: wrap;
    }
    .searchFruits_table{
        width:100%;
        min-height:8.4rem;
    }
    .searchFruits_h6{
        width:100%;
        height:1.06rem;
        line-height:1.06rem;
        text-align:center;
        color:#000000;
        font-size:0.24rem;
    }
    .searchFruits_search ul:nth-of-type(2){

        min-height:1.8rem;
        display:flex;
        flex-wrap:wrap
    }
    .searchFruits_search ul:nth-of-type(2) li{
        list-style:none;
        color:#606060;
        background:#eeeeee;
        font-size:0.2rem;
        height:0.54rem;
        line-height:0.54rem;
        text-align:center;
        padding:0 0.3rem;
        border-radius:0.1rem;
        margin-left:0.24rem;
        margin-bottom:0.3rem;
        float:left;
    }
    .searchFruits_search h5{
        width:100%;
        height:0.87rem;
        line-height:0.87rem;
        color:#b4b4b4;
        font-size:0.2rem;
        text-indent:0.26rem;
    }
    .searchFruits_search ul:nth-of-type(1){
        width:100%;
        min-height:0.54rem;
        display:flex;
        margin-bottom:0.05rem;
        flex-wrap:wrap
    }
     .searchFruits_search ul:nth-of-type(1) li{
        list-style:none;
         color:#606060;
         background:#eeeeee;
         font-size:0.2rem;
         line-height:0.54rem;
         text-align:center;
         padding:0 0.3rem;
         border-radius:0.1rem;
         margin-left:0.24rem;
    }
    .searchFruits_search h4{
        width:100%;
        height:0.9rem;
        line-height:0.9rem;
        color:#b4b4b4;
        font-size:0.2rem;
        text-indent: 0.26rem;
    }
    .searchFruits_search{
        width:100%;
        min-height:4.16rem;
        border-bottom:0.1rem solid #f5f4f2;
    }
    .searchFruits_top img:nth-of-type(2){
        display:block;
        position:absolute;
        width:0.23rem;
        height:0.25rem;
        left:1.08rem;
        top:0.28rem;
    }
    .searchFruits_top input{
        display:block;
        border:0;
        width:4.43rem;
        height:0.48rem;
        background:#e5e5e5;
        outline:none;
        position:absolute;
        left:1rem;
        top:0.16rem;
        border-radius:0.1rem;
        text-indent: 0.42rem;
        color:#afafaf;
        font-size:0.2rem;

    }
    .searchFruits_top span{
        display:block;
        position:absolute;
        width:0.9rem;
        height:0.78rem;
        line-height:0.78rem;
        text-align:center;
        color:#85a45a;
        font-size:0.21rem;
        top:0;
        right:0;
    }

    .searchFruits_top img:nth-of-type(1){
        width:0.31rem;
        height:0.37rem;
        display:block;
        position:absolute;
        left:0.25rem;
        top:0.2rem;
    }
.searchFruits_top{
    width:100%;
    height:0.78rem;
    position:relative;
    border-bottom:1px solid #d7d7d7;
}
</style>
